Hi everyone in this article I’m explaining about Check Availability of user name or email.
Description:
Today every website has a registration page. So I created a registration page in which the user enters user information like name, username or email, password, address and so on. The registration page must validate that the username or email is unique. So it must check the username or email the user entered. When this validation is done for the submit button click it is not good for the user, he fully fills in the form then clicks. If something does not exist then the user again fills in the form. So I do the validation on the entering of data into the TextBox (OnTextChanged event). Here I am getting the problem that after entering a username into the TextBox I am getting the data from the database and showing the result on the page, like whether or not that username is available but at that time the page gets a post-back and sometimes loses the values entered into the textboxes and all this because I used an Ajax jQuery to check the username or email availability.
Now first create the user table in the database.
Create table tbl_User
(
Name varchar(100),
UserNameorEmail varchar(100),
Address varchar(500)
)
And insert some records into the table:
Insert into tbl_User(Name, UserNameorEmail, Address) values('Rohit', 'rohit@gmail.com', 'Sulaim Sarai Allahabad')
Insert into tbl_User(Name, UserNameorEmail, Address) values('Pawan', 'pawan@test.com', 'Gangotri nagar Allahabad')
Insert into tbl_User(Name, UserNameorEmail, Address) values('Kamlakar', 'kamlakar123', 'Civil Lines Allahabad')
Insert into tbl_User(Name, UserNameorEmail, Address) values('Manoj', 'manoj@test.com', 'Ghoorpur Allahabad')
After creating the table, create the web application:
Step1:
Open visual studio >> Click file >> New >> Website
Give the name “CheckUsernameEmailAvailabilityUsingAjax”.
Step 2:
Add a WebForms
Your aspx page likes this.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Registration.aspx.cs" Inherits="Registration" %>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Check Username/Email availability Using Ajax and JQuery</title> </head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" />
</td>
<td></td>
</tr>
<tr>
<td>User Or Email Name:
</td>
<td>
<asp:TextBox ID="txtUsernameOrEmail" runat="server" onchange="UserOrEmailAvailability()" /> </td>
<td>
<div id="checkusernameoremail" runat="server"> <asp:Label ID="lblStatus" runat="server"></asp:Label> </div> </td> </tr> <tr> <td>Address</td> <td> <asp:TextBox ID="txtAddress" TextMode="MultiLine" runat="server" /></td> </tr> </table> </div> </form> <script src="js/jquery-1.10.2.js"></script> <script type="text/javascript">
function UserOrEmailAvailability() { //This function call on text change.
$.ajax({
type: "POST",
url: "registration.aspx/CheckEmail", // this for calling the web method function in cs code.
data: '{useroremail: "' + $("#<%=txtUsernameOrEmail.ClientID%>")[0].value + '" }',// user name or email value
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response);
}
});
}
// function OnSuccess
function OnSuccess(response) {
var msg = $("#<%=lblStatus.ClientID%>")[0];
switch (response.d) {
case "true":
msg.style.display = "block";
msg.style.color = "red";
msg.innerHTML = "User Name Or Email already exists.";
break;
case "false":
msg.style.display = "block";
msg.style.color = "green";
msg.innerHTML = "User Name Or Email Available";
break;
}
}
</script>
</body>
</html>
Now add a “using System.Data.SqlClient;” reference in the code behind and write the following code to check whether or not the Username or Email exists in the database.
Your aspx.cs page likes this.
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Registration : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string CheckEmail(string useroremail)
{
string retval = "";
SqlConnection con = new SqlConnection("Data Source=MINDSTICK-2;Initial Catalog=KAMLAKAR;Integrated Security=True");
con.Open();
SqlCommand cmd = new SqlCommand("select UserNameorEmail from tbl_User where UserNameorEmail=@UserNameorEmail", con);
cmd.Parameters.AddWithValue("@UserNameorEmail", useroremail);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
retval = "true";
}
else
{
retval = "false";
}
return retval;
}
}
Add a jQuery library reference to the aspx page:
<script src="js/jquery-1.10.2.js"></script>
Output when user name available
Output when user name not available
In my next post I’ll explain about Working with Web-SQL Database & HTML5
Leave Comment